<template>
	<view class="page">
		<view class="login-img-top">
			<image class="" src="../../../static/login01.png" style="width: 100%; background-color: #ffffff" mode="scaleToFill"></image>
		</view>
		<view class="top-background-raduis">
			<image style="width: 75%; height: 100px; background-color: #ffffff" mode="aspectFit" src="@/static/logo_FA.png"></image>
		</view>
		<view class="login-box">
			<view class="login-card-title">
				<view class="login-card-title-content">赣锋随手拍</view>
			</view>
			<view class="login-card-input">
				<!-- 输入框头部图标 -->
				<uni-easyinput
					prefixIcon="person"
					class="hj-input"
					v-model="name"
					maxlength="30"
					:trim="true"
					:styles="inputColorConfigToUserName"
					:inputBorder="false"
					placeholder="请输入账号"
				></uni-easyinput>
				<!-- 输入框头部图标 -->
				<uni-easyinput
					prefixIcon="locked"
					class="hj-input"
					v-model="password"
					type="password"
					:styles="inputColorConfigToPassWord"
					:inputBorder="false"
					placeholder="请输入密码"
				></uni-easyinput>
			</view>
			<view class="login-bottom-info">
				<checkbox-group @change="checkboxChange">
					<label class="save-pwd-radio">
						<checkbox value="isSavePwd" color="#3cb79a" :checked="isSavePwd" style="transform: scale(0.8)" />
						记住账号
					</label>
				</checkbox-group>
			</view>
			<view class="login-card-loginIn">
				<view class="login-card-loginIn-btn" @click="login">登 录</view>
			</view>
		</view>
		<view class="login-img-bottom">
			<image src="../../../static/login02.png" style="width: 100%; background-color: #ffffff" mode="scaleToFill"></image>
		</view>
		<view class="bottom-wrap">
			<text>v{{appVersion}}</text>
			<text @click="gotoServer" style="color: dodgerblue; margin-left: 10px">服务器设置</text>
			<!-- <text @click="gotoCode" style="color: dodgerblue; margin-left: 10px">扫码</text> -->
			<!-- <text @click="gotoWeCom" style="color: dodgerblue; margin-left: 10px">企微测试</text> -->
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { DATASOURCE, LOGININFO_KEY, BASEDOC } from '@/common/const/index';
import { appVersion } from '@/config/index.js';
export default {
	data() {
		return {
			// 输入框边框颜色默认值
			colorDefault: '#b4b4b4',
			// 输入框边框聚焦值
			colorFocusColor: '#3cb79a',
			// 输入框颜色配置
			inputColorConfigToUserName: {
				color: '#000000',
				disableColor: '#eee',
				borderColor: '#b4b4b4'
			},
			// 输入框颜色配置
			inputColorConfigToPassWord: {
				color: '#000000',
				disableColor: '#eee',
				borderColor: '#b4b4b4'
			},
			isSavePwd: false, //是否记住账号
			name: '',
			password: '',
			appVersion: appVersion
		};
	},
	//监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
	onInit() {},
	//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
	onLoad() {},
	//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {},
	//监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
	onShow() {
		let isSavePwd = uni.getStorageSync('isSavePwd');
		this.isSavePwd = Boolean(isSavePwd);
		if (this.isSavePwd) {
			let loginUserPwdInfo = uni.getStorageSync('LOGIN_USER_PWD');
			this.name = loginUserPwdInfo.username;
			this.password = loginUserPwdInfo.password;
		}

		let that = this;

		// 设置免登录
		let accessToken = uni.getStorageSync(this.$GC.ACCESS_TOKEN_KEY);
		if (accessToken) {
			this.$tool.msg('自动登录...');
			
			this.$GC.API_TOKEN = accessToken;
			this.$api
				.getUserinfo()
				.then((userInfo) => {
					uni.setStorageSync(that.$GC.LOGININFO_KEY, userInfo);
					uni.switchTab({
						url: '/pages/sys/home/home',
						success: () => {
							//跳转到首页后
							that.$tool.downloadAllBaseDoc.call(this);

							let psndocInfo = {};
							let queryPsndocData = {};

							queryPsndocData.SearchJson = JSON.stringify({
								psndocCode: username
							});

							that.$api
								.queryPsndoc(queryPsndocData)
								.then((res) => {
									let PsndocSdt4ApiItems = res.PsndocSdt4ApiItems;
									if (PsndocSdt4ApiItems) {
										psndocInfo = PsndocSdt4ApiItems[0];
									}

									// 合并用户信息和人员信息
									const mergedObj = Object.assign({}, userInfo, psndocInfo);

									// 缓存用户信息
									uni.setStorage({
										key: that.$GC.LOGININFO_KEY,
										data: mergedObj,
										success: function () {
											that.$tool.msg('登录成功！');
										}
									});
								})
								.catch((error) => {});
						}
					});
					if (that.isSavePwd) {
						let loginUserPwdInfo = {
							username: username,
							password: password
						};
						// 账号信息保存至本地
						uni.setStorage({
							key: 'LOGIN_USER_PWD',
							data: loginUserPwdInfo
						});
					} else {
						uni.removeStorage({
							key: 'LOGIN_USER_PWD'
						});
					}
					that.$store.dispatch('login', userInfo);
				})
				.catch((errors) => {});
		}
	},
	beforeDestroy() {},
	//页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。
	onReachBottom() {},
	onShareAppMessage() {},
	created() {},
	methods: {
		checkboxChange(e) {
			let value = e.detail.value;
			let flag = false;
			value.map((item) => {
				if (item == 'isSavePwd') {
					flag = true;
				}
			});
			this.isSavePwd = flag;
			uni.setStorageSync('isSavePwd', flag);
		},
		gotoServer() {
			uni.navigateTo({
				url: '/pages/sys/server/server'
			});
		},
		gotoCode() {
			uni.navigateTo({
				url: '/pages/sys/scancode/index'
			});
		},
		gotoWeCom() {
			uni.navigateTo({
				url: '/pages/sys/test/wecomTest/wecomTest'
			});
		},
		login() {
			let username = this.name;
			let password = this.password;

			if (username == '' || password == '') {
				this.$refs.uToast.show({
					type: 'error',
					duration: '1000',
					message: `请输入用户名和密码`
				});
				return;
			}

			let data = {
				username: username,
				password: password,
				grant_type: 'password',
				client_id: this.$GC.CLIENT_ID,
				client_secret: this.$GC.CLIENT_SECRET,
				scope: 'gam_user_data+gam_user_roles+gam_user_additional_data+session_initial_prop+session_application_data+fullcontrol'
			};

			let that = this;
			this.$api
				.login(data)
				.then((res) => {
					if (res.Message) {
						that.$refs.uToast.show({
							type: 'error',
							duration: '2000',
							message: `${res.Message}`
						});
						return;
					}
					let access_token = res.access_token;
					// 放入全局变量中
					that.$GC.API_TOKEN = access_token;
					// 放入缓存中
					uni.setStorageSync(that.$GC.ACCESS_TOKEN_KEY, access_token);

					that.$api
						.getUserinfo()
						.then((userInfo) => {
							uni.setStorageSync(that.$GC.LOGININFO_KEY, userInfo);
							uni.switchTab({
								url: '/pages/sys/home/home',
								success: () => {
									//跳转到首页后
									that.$tool.downloadAllBaseDoc.call(this,0);

									let psndocInfo = {};
									let queryPsndocData = {};

									queryPsndocData.SearchJson = JSON.stringify({
										psndocCode: username
									});

									that.$api
										.queryPsndoc(queryPsndocData)
										.then((res) => {
											let PsndocSdt4ApiItems = res.PsndocSdt4ApiItems;
											if (PsndocSdt4ApiItems) {
												psndocInfo = PsndocSdt4ApiItems[0];
											}

											// 合并用户信息和人员信息
											const mergedObj = Object.assign({}, userInfo, psndocInfo);

											// 缓存用户信息
											uni.setStorage({
												key: that.$GC.LOGININFO_KEY,
												data: mergedObj,
												success: function () {
													that.$tool.msg('登录成功！');
												}
											});
										})
										.catch((error) => {});
								}
							});
							if (that.isSavePwd) {
								let loginUserPwdInfo = {
									username: username,
									password: password
								};
								// 账号信息保存至本地
								uni.setStorage({
									key: 'LOGIN_USER_PWD',
									data: loginUserPwdInfo
								});
							} else {
								uni.removeStorage({
									key: 'LOGIN_USER_PWD'
								});
							}
							that.$store.dispatch('login', userInfo);
						})
						.catch((errors) => {});
				})
				.catch((errors) => {});

			return;
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	position: relative;
	height: 99vh;
	overflow: hidden;
	font-family: 'PingFang SC Regular';
}

.login-img-top {
	position: absolute;
	width: 100%;
	top: -140px;
	right: -50px;
}

.login-img-bottom {
	position: relative;
	width: 50% !important;
	bottom: -300rpx;
	left: -25px;
}

.top-background-raduis {
	text-align: center;
	height: auto;
	margin-top: 110px;
	// background-color: #d8d8d8;
	// border-bottom-left-radius: 50%;
	// border-bottom-right-radius: 50%;
}

/deep/ .is-input-border {
	border-radius: 7px !important;
}

/deep/ .uni-easyinput__content {
	min-height: 39px !important;
	font-size: 1.4em;
}

/deep/ .uni-input-placeholder {
	font-size: 1.4em;
}

/deep/ .uni-input-input {
	font-size: 1.4em;
	letter-spacing: 2rpx;
}

.hj-input {
	margin-top: 15rpx;
	border-bottom: 1px solid #eee;
}

.hj-input:nth-child(2) {
	margin-top: 35rpx;
}

.login-box {
	z-index: 1;
	position: relative;
	width: 90%;
	left: 5%;
	right: 5%;
	height: 650rpx;
	// padding: 18rpx;
	background-color: white;
	border-radius: 30rpx;

	// box-shadow: 0px 0px 0px 1px #e3e3e3;
	.login-card-input {
		// background-color: violet;
		height: 200rpx;
	}

	.login-card-title {
		height: 100rpx;
		// background-color: black;
		padding: 28rpx;
		display: flex;
		justify-content: flex-start;

		.login-card-title-content {
			font-size: 1.6em;
			color: #339966;
			font-weight: 700;
		}
	}

	.login-card-loginIn {
		height: 180rpx;
		display: flex;
		justify-content: center;
		padding: 10rpx;
		align-items: center;

		.login-card-loginIn-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #339966;
			width: 100%;
			font-size: 1.2em;
			height: 60%;
			border-radius: 30rpx;
			color: white;
		}
	}

	.login-bottom-info {
		// height: 4%;
		display: flex;
		font-size: 1em;
		color: #3cb79a;
		justify-content: flex-end;
		flex-direction: row;
		align-content: center;
		flex-wrap: nowrap;
		align-items: flex-end;
	}

	.save-pwd-radio {
		color: #3cb79a;
		transform: scale(0.9);
	}
}

.bottom-wrap {
	position: fixed;
	bottom: 10rpx;
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	font-size: 0.9em;
	overflow: hidden;
	color: #969898;
}
</style>
